<template>
  <button :hover-class="`${disabled || loading ? '' : 'mui-button--hover'}`"
          :style="customStyle"
          class="mui-button" :class="[fill ? `is-fill` : '', `is-${type}`, `is-${size}`, round ? 'is-round' : '', hairline ? 'is-hairline' : '', plain ? 'is-plain' : '', disabled ? 'is-disabled' : '', block ? 'is-block' : '', loading ? 'is-loading' : '', customClass]"
          :hover-start-time="hoverStartTime"
          :hover-stay-time="hoverStayTime"
          :open-type="disabled || loading ? undefined : openType"
          :send-message-title="sendMessageTitle"
          :send-message-path="sendMessagePath"
          :send-message-img="sendMessageImg"
          :show-message-card="showMessageCard"
          :session-from="sessionFrom"
          :lang="lang"
          :hover-stop-propagation="hoverStopPropagation"
          :scope="scope"
  >
    <view v-if="loading" class="loading">
      <slot name="loading">
        <image class="loading-icon"
               src=""
        />
      </slot>
    </view>
    <view v-if="icon" class="icon">
      <slot name="icon"></slot>
    </view>
    <view v-if="!startCountDown" class="mui-button__content">
      <slot></slot>
    </view>
    <view v-if="countDown && startCountDown" class="count-down">
      <text>{{ count }}秒{{ countDownText }}</text>
    </view>
  </button>
</template>

<script>
import { buttonProps } from './types'

export default {
  props: buttonProps,
  emits: ['click', 'longclick', 'getphonenumber', 'getuserinfo', 'error', 'opensetting', 'launchapp'],
  data() {
    return {
      startCountDown: false,
      count: this.countDownNum,
      timer: null
    }
  },
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared'
  },
  computed: {
    hoverClass() {
      if (this.disabled) return ''
      return this.type === 'filled'
        ? 'btnHoverClass-filled'
        : (this.type === 'plain'
            ? 'btnHoverClass-plain'
            : 'btnHoverClass-hollow')
    }
  },
  methods: {
    onClick(e) {
      if (!this.disabled && !this.startCountDown) {
        this.$emit('click', e)
      }
      if (this.countDown && !this.startCountDown) {
        this.startCountDown = true
        this.timer = setInterval(() => {
          this.count--
          if (this.count === 0) {
            clearInterval(this.timer)
            this.startCountDown = false
            this.count = this.countDownNum
          }
        }, 1000)
      }
    },
    onLongClick(e) {
      if (!this.disabled && !this.startCountDown) {
        this.$emit('longclick', e)
      }
    },
    getphonenumber(res) {
      this.$emit('getphonenumber', res)
    },
    getuserinfo(res) {
      this.$emit('getuserinfo', res)
    },
    error(res) {
      this.$emit('error', res)
    },
    opensetting(res) {
      this.$emit('opensetting', res)
    },
    launchapp(res) {
      this.$emit('launchapp', res)
    }
  }
}
</script>

<style lang="scss">
@use '../common/css/variable.scss';
@use './index.scss';

.btnHoverClass-plain::after {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.btnHoverClass-hollow::after {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.btnHoverClass-filled::after {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

.button-hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0.7;
}

.loading {
  font-size: 10px;
  position: relative;
  animation: loading 0.75s infinite linear;
  margin-right: 20rpx;
}

.loading,
.loading:after {
  border-radius: 50%;
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
